<%--
  Created by IntelliJ IDEA.
  User: liu
  Date: 2018/9/6
  Time: 9:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
    <title>投票</title>
</head>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/layui/layui.js"></script>
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css"/>
<link rel="stylesheet" type="text/css" href="js/font-awesome/css/font-awesome.css"/>
<style>
    .layui-table-cell {
        padding-top: 10px;
        height: 100px;
        font-size: 45px;
        margin-top: 20px;
        line-height: 70px;
        /*height:auto;*/
        overflow:visible;
        text-overflow:inherit;
        white-space:normal;
    }

    .layui-table tbody tr:hover, .layui-table thead tr, .layui-table-click, .layui-table-header, .layui-table-hover, .layui-table-mend, .layui-table-patch, .layui-table-tool, .layui-table-total, .layui-table-total tr, .layui-table[lay-even] tr:nth-child(even){
        background-color: transparent;
    }
    .layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {
        border-width: 1px;
        border-style: solid;
        border-color: #ffffff;
    }

</style>
<body>

<div >
  <%--  <i class="layui-btn layui-icon-face-smile" id="start" onclick="time(1)">刷新</i>--%>
    <div id="param" style="text-align: center;font-size: 50px;color: #F32F2F;margin-top: 50px"></div>
    <div style="font-size: 35px;text-align: center">
        注：<i  style="color:red;" class="fa fa-thumbs-up"></i> 为投票成功&nbsp;&nbsp;<i  class="fa fa-thumbs-o-up"></i>为未投票
    </div>
      <div style="margin-top: -100px">
    <table id="table"style="font-size:120px;" lay-filter="table" ></table>
    <div style="margin: 0 auto;width: 70%;font-size: 50px">
      <%--<div class="layui-btn layui-btn-radius layui-btn-warm layui-btn-fluid" style="margin-top: 100px;height: 100px"  onclick="reloadPage()" >--%>
        <%--<span style="font-size:70px;line-height: 100px" >红色小手则为投票成功</span>--%>
   <%-- </div>--%>

    </div>
    </div>
</div>
</body>
<script type="application/javascript">
    var param=0
    var layer;
    var table;
    layui.use(['table', 'layer'], function () {
        table = layui.table;
        layer = layui.layer;
        table.render({
            elem: '#table',
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight-230
            , url: '/voteJson/' +getCookie("appId")
            , cols: [[ //标题栏
                { width: "10%"},
                {field: 'name', title: '节目名', width: "70%", height:210,templet:'#name'}
                , {field: 'person', title: '投票', width: "20%", style:'height:150px;',templet:'#vote'}
            ]]
            , skin: 'nob' //表格风格
          //  , even: true
            , page: false //是否显示分页
            , method: 'get',
            response: {
                statusName: 'statusCode' //数据状态的字段名称，默认：code
                , statusCode: 200 //成功的状态码，默认：0
                , msgName: 'statusMsg' //状态信息的字段名称，默认：msg
                , countName: 'totalPages' //数据总数的字段名称，默认：count
                , dataName: 'data' //数据列表的字段名称，默认：data
            },
            done: function () {
                $('.layui-table-header').css({'visibility': 'hidden'});
            }
        });
    })

    function del(id,gro,a) {
        $.get("../delete/"+getCookie("appId")+"/"+id+"/"+gro,function (data) {

            if(data.statusCode=="000000"){
                $(a).html("<i class=\"fa fa-thumbs-o-up\"></i>")
                var fun= $(a).attr("onclick");
                fun="sub"+fun.substring(3,fun.length)
                $(a).attr("onclick",fun)
            }
            if(data.statusCode=="111111"){
                reloadPage()
                initParam()
            }
        })

    }

    function sub(id,gro,a) {
        if(!getCookie("appId")){
            alert("登陆超时，请重新扫码登陆！")
            return
        }
        $.get("../subVote?appId=" + getCookie("appId") + "&id=" +id + "&gro=" + gro, function (data) {
            if(data.statusCode=="000000"){
                $(a).html("<i style=\"color:red;\" class=\"fa fa-thumbs-up\"></i>")
                var fun= $(a).attr("onclick");
                fun="del"+fun.substring(3,fun.length)
                $(a).attr("onclick",fun)
            }
            if(data.statusCode=="111111"){
                reloadPage()
                initParam()
            }

        })

    }


$(function () {
   setCookie("appId",'${appId}',1000*60*60*24*30);
    initParam();
})

    function initParam() {
        $.get("/getParam",function (data) {
            param=data.name
            $("#param").html("第"+param+"轮")
        })
    }

    function reloadPage() {
       table.reload("table")
    }


</script>
<script type="application/javascript" id="name">
    <div style="font-size:45px;height:120px;">{{d.name}}</div>
</script>
<script type="application/javascript" id="person">
    <div style="font-size:45px;height:120px;">{{d.person}}</div>
</script>
<script type="application/javascript" id="vote">
    {{# if (d.isVote=== 1) { }}
    <div style="margin-top: 30;"><spen style="margin-left: 30; word-break:break-all;" onclick="del('{{d.id}}','{{d.gro}}',this)"><i  style="color:red;"  class="fa fa-thumbs-up"></i></spen></div>
        {{#}else {}}
    <div style="margin-top: 30;"><spen style="margin-left: 30;" onclick="sub('{{d.id}}','{{d.gro}}',this)"><i  class="fa fa-thumbs-o-up"></i></spen></div>
        {{# } }}
</script>



<script type="application/javascript">
    function setCookie(key, value, days) {
        // 设置过期原则
        if (!value) {
            localStorage.removeItem(key)
        } else {
            var Days = days || 7; // 默认保留7天
            var exp = new Date();
            localStorage[key] = JSON.stringify({
                value,
                expires: exp.getTime() + Days
            })
        }
    }

    function getCookie(name) {
        try {
            let o = JSON.parse(localStorage[name])
            if (!o || o.expires < Date.now()) {
                return ''
            } else {
                return o.value
            }
        } catch (e) {
            // 兼容其他localstorage
            console.log(e)
            return localStorage[name]
        } finally {
        }
    }
</script>
</html>
